<template>
  <div class="page">
    <header class="page__header">
      <div class="page-actions">
        <div style="border-right:1px solid #c5c5c5;cursor: pointer;" @click="exit">
          <i class="el-icon-arrow-left"></i>
        </div>
        <div>当前创建表单名称：{{ title }}</div>
      </div>
      <div class="step-tab">
        <div
            v-for="(item, index) in steps"
            :key="index"
            class="step"
            :class="[activeStep==item.key?'active':'']"
            @click="changeSteps(item)"
        >
          <span class="step-index">{{ index + 1 }}</span>
          {{ item.label }}
        </div>
        <div class="ghost-step step" :style="{transform: translateX}"></div>
      </div>
      <el-button size="small" class="publish-btn" @click="publish">发布</el-button>
    </header>
    <section class="page__content" v-if="mockData">
      <DynamicForm
          ref="formDesign"
          :conf="mockData.formData"
          v-show="activeStep === 'formDesign'"
          tabName="formDesign"/>
    </section>
  </div>
</template>

<script>
//引入动态表单组件
import DynamicForm from "@/components/DynamicForm";
import {GET_MOCK_CONF} from '../../api'

const beforeUnload = function (e) {
  var confirmationMessage = '离开网站可能会丢失您编辑得内容';
  e.returnValue = confirmationMessage;     // Gecko and Trident
  return confirmationMessage;                                // Gecko and WebKit
}
export default {
  data() {
    return {
      mockData: null, // 可选择诸如 $route.param，Ajax获取数据等方式自行注入
      activeStep: "formDesign", // 激活的步骤面板
      steps: [
        {label: "表单设计", key: "formDesign"},
      ],
      title: null
    };
  },
  //路由守卫进入
  beforeRouteEnter(to, from, next) {
    window.addEventListener('beforeunload', beforeUnload)
    next()
  },
  //路由守卫离开
  beforeRouteLeave(to, from, next) {
    window.removeEventListener('beforeunload', beforeUnload)
    next()
  },
  computed: {
    translateX() {
      return `translateX(${this.steps.findIndex(t => t.key === this.activeStep) * 100}%)`
    }
  },
  mounted() {
    //获取表单名称
    const formName = this.$route.query.formName
    this.title = formName || this.title
    //获取mock数据
    GET_MOCK_CONF().then(data => {
      this.mockData = data
      this.mockData.formData.fields = [];
      //如果有表单名称，就把表单名称赋值给表单
      if (this.title) {
        this.mockData.formDate.formRef = this.title
      } else {
        this.title = '创建表单'
        this.mockData.formData.formRef = '创建表单'
      }
    });
  },
  methods: {
    //切换步骤
    changeSteps(item) {
      this.activeStep = item.key;
    },
    // 发布
    async publish() {
      const getCmpData = name => this.$refs[name].getData()
      try {
        const formData = await getCmpData('formDesign')
        const param = {
          formData: formData,
        }
        this.sendToServer(param)
      } catch (err) {
        err.target && (this.activeStep = err.target)
        err.msg && this.$message.warning(err.msg)
      }
    },
    sendToServer(param) {
      this.$notify({
        title: '数据已整合完成',
        message: '请在控制台中查看数据输出',
        position: 'bottom-right'
      });
      console.log('配置数据', param)
    },
    exit() {
      this.$confirm('离开此页面您得修改将会丢失, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$router.push({name: 'home'})
        this.$message({
          type: 'success',
          message: '模拟返回!'
        });
      }).catch(() => {
      });
    },
  },
  components: {
    DynamicForm,
  }
};
</script>
<style lang="stylus" scoped>
$header-height = 54px;
.page {
  width: 100vw;
  height: 100vh;
  padding-top: $header-height;
  box-sizing: border-box;

  .page__header {
    width: 100%;
    height: $header-height;
    flex-center()
    justify-content: space-between;
    box-sizing: border-box;
    color: white;
    background: #3296fa;
    font-size: 14px;
    position: fixed;
    top: 0;

    .page-actions {
      height: 100%;
      text-align: center;
      line-height: $header-height;

      > div {
        height: 100%;
        padding-left: 20px;
        padding-right: 20px;
        display: inline-block;
      }

      i {
        font-size: 22px;
        vertical-align: middle;
      }
    }

    .step-tab {
      display: flex;
      justify-content: center;
      height: 100%;
      position: relative;

      > .step {
        width: 140px;
        line-height: $header-height;
        padding-left: 30px;
        padding-right: 30px;
        cursor: pointer;
        position: relative;

        &.ghost-step {
          position: absolute;
          height: $header-height;
          left: 0;
          z-index: -1;
          background: #4483f2;
          transition: transform .5s;

          &::after {
            content: '';
            border-width: 6px 6px 6px;
            border-style: solid;
            border-color: transparent transparent white;
            position: absolute;
            bottom: 0;
            left: 50%;
            margin-left: -6px;
          }
        }

        &.active > .step-index {
          background: white;
          color: #4483f2;
        }

        > .step-index {
          display: inline-block;
          width: 18px;
          height: 18px;
          border: 1px solid #fff;
          border-radius: 8px;
          line-height: 18px;
          text-align: center;
          box-sizing: border-box;
        }
      }
    }
  }

  .page__content {
    width: 100%;
    height: 100%;
    overflow: hidden;
    box-sizing: border-box;
    background #f5f5f7
  }
}

.publish-btn {
  margin-right: 20px;
  color: #3296fa;
  padding: 7px 20px;
  border-radius: 4px;
  font-size: 14px;
}
</style>
